<template>
  <px-dialog v-model="visible" title="移动到" width="500" @close="cancel">
    <div class="tree-container">
      <px-tree
        ref="treeRef"
        :data="treeData"
        node-key="id"
        highlight-current
        default-expand-all
        :current-node-key="currentNode"
        :expand-on-click-node="false"
        @node-click="nodeClick"
      >
        <template #default="{ node }">
          <span class="custom-tree-node show-hide">
            <span>
              <Folder class="folder-icon" />
              {{ node.label }}
            </span>
          </span>
        </template>
      </px-tree>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="cancel">取消</px-button>
        <px-button type="primary" @click="confirm">确定</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script setup>
import { ref, reactive, nextTick, watch, toRefs, computed } from "vue";
import Folder from "@/assets/svg/knowledge/folder.svg?component";
import { PxMessageBox } from "px-ui";

const emits = defineEmits(["update:visible", "moveConfirm"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  treeData: {
    type: Array,
    default() {
      return [];
    }
  }
});

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const treeRef = ref();
const currentNode = ref();

// 点击节点
const nodeClick = (data, node, obj) => {
  currentNode.value = data.id;
};

const cancel = () => {
  emits("update:visible", false);
};

const confirm = () => {
  emits("moveConfirm", currentNode.value);
};

defineExpose({
  cancel
});
</script>

<style lang="scss" scoped>
.folder-icon {
  display: inline-block;
  vertical-align: middle;
}

.tree-icon-container {
  .tree-icon {
    display: inline-block;
    margin: 8px 0 0 8px;
    font-size: 12px;
  }
}

.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
}

.show-hide:hover :nth-child(2) {
  display: inline !important;
}

:deep(.px-tree-node__content) {
  width: 100%;
}
</style>
